<template>
  <!-- 发布商品 -->
  <c-main-template
    class="mr-24 ml-24 mt-24"
    minHeight="auto"
    :isBreadcrumb="false"
  >
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">车辆信息：</div>
          <el-input
            size="large"
            placeholder="请输入车辆信息"
            v-model="querys.productInfo"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">创建时间：</div>
          <el-date-picker
            v-model="time"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="large"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">状态：</div>
          <el-select
            v-model="querys.status"
            multiple
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in productType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mg-24"
    minHeight="auto"
    title="商品列表"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handleBatchRemoval"
        >批量下架</el-button
      >
      <el-button size="large" @click="handleDraft">草稿箱</el-button>
      <el-button size="large" @click="handleAdd" type="primary"
        >添加商品</el-button
      >
    </template>

    <c-table-template
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="multipleTableRef"
      :row-key="getRowKey"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
        :selectable="onCheckSelectable"
        :reserve-selection="true"
      />
      <el-table-column label="序号" type="index" align="center" width="90" />
      <el-table-column
        label="商品标题"
        prop="productTitle"
        align="left"
        min-width="280"
      />
      <el-table-column
        label="车辆信息"
        prop="productInfo"
        align="left"
        min-width="350"
      />
      <el-table-column
        label="库存(辆)"
        prop="stockAmount"
        align="center"
        width="200"
      />
      <el-table-column label="状态" align="center" width="200">
        <template #default="scope">
          {{ productType[scope.row.status].label }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="left" width="250">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button type="primary" link @click="handleDetails(scope.row)">
            <span v-if="scope.row.status === 0">详情</span>
            <span v-else-if="scope.row.status === 2">详情</span>
            <span v-else>编辑</span>
          </el-button>
          <el-button type="primary" link @click="handleCopy(scope.row)">
            <span>复制</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <c-drafts ref="cDraftsRefs" />
  </c-main-template>
</template>
<script setup>
import { ref, onMounted,getCurrentInstance } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { useRouter } from "vue-router";
import { productType } from "@/utils/status.js";
import { ElMessage, ElMessageBox } from "element-plus";
import cDrafts from "./components/Drafts.vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const multiples = ref([]);
const multipleTableRef = ref();
const cDraftsRefs = ref();
const time = ref([]);
const handleAdd = () => {
  router.push("/PublishGoods/Details");
};
const handleBatchRemoval = () => {
  if (multiples.value.length <= 0) {
    ElMessage.warning("请选择批量项");
    return;
  }
  ElMessageBox.confirm("是否确认此操作?", "提醒", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const url = "/product/listing/batchOff";
    await proxy.$post({
      url,
      data: multiples.value.map((x) => x.id),
    });
    ElMessage.success("下架成功");
    handleReset()
  });
};
const onCheckSelectable = (item) => {
  if (item.status === 2) {
    // 已上架
    return true;
  }
  return false;
};
const getRowKey = (item) => {
  return item.id;
};
const handleSelectionChange = (item) => {
  multiples.value = item;
};
const handleDetails = (item) => {
  router.push({
    path: "/PublishGoods/Details",
    query: {
      id: item.id,
    },
  });
};
const handleCopy = (item) => {
  router.push({
    path: "/PublishGoods/Details",
    query: {
      id: item.id,
      copy: true,
    },
  });
};

const handleDraft = () => {
  cDraftsRefs.value.handleOpen();
};
const handleReset = () => {
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  querys.value = {
    current: 1,
    size: 10,
  };
  time.value = [];
  tableList();
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/product/listing/pageSeller",
  getParams: () => {
    const params = {};
    if (time.value && time.value.length > 0) {
      params.startDate = time.value[0];
      params.endDate = time.value[1];
    }
    if (querys.value.status && querys.value.status.length > 0) {
      params.status = querys.value.status.join(",");
    }
    return params;
  },
});
</script>
<style lang="less" scoped>
:deep(.el-dialog__body) {
  padding: 0 !important;
}
</style>